import React from 'react';
import { Row, Col, Card, Button } from 'antd';
import * as d3 from 'd3-shape';
import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
import Container from './Container';

const data = [
    {
        name: 'Page A',
        uv: 4000,
        pv: 2400,
        amt: 2400,
    },
    {
        name: 'Page B',
        uv: 3000,
        pv: 1398,
        amt: 2210,
    },
    {
        name: 'Page C',
        uv: 2000,
        pv: 9800,
        amt: 2290,
    },
    {
        name: 'Page D',
        uv: 2780,
        pv: 3908,
        amt: 2000,
    },
    {
        name: 'Page E',
        uv: 1890,
        pv: 4800,
        amt: 2181,
    },
    {
        name: 'Page F',
        uv: 2390,
        pv: 3800,
        amt: 2500,
    },
    {
        name: 'Page G',
        uv: 3490,
        pv: 4300,
        amt: 2100,
    },
];

const mixData = [
    {
        name: 'Page A',
        uv: 4000,
        pv: 2400,
        amt: 2400,
    },
    {
        name: 'Page B',
        uv: 3000,
        pv: 1398,
        amt: 2210,
    },
    {
        name: 'Page C',
        uv: 2000,
        pv: 9800,
        amt: 2290,
    },
    {
        name: 'Page D',
        uv: 2780,
        pv: 3908,
        amt: 2000,
    },
    {
        name: 'Page E',
        uv: 1890,
        pv: 4800,
        amt: 2181,
    },
    {
        name: 'Page F',
        uv: 2390,
        pv: 3800,
        amt: 2500,
    },
    {
        name: 'Page G',
        uv: 3490,
        pv: 4300,
        amt: 2100,
    },
];

const percentData = [
    {
        month: '2015.01',
        a: 4000,
        b: 2400,
        c: 2400,
    },
    {
        month: '2015.02',
        a: 3000,
        b: 1398,
        c: 2210,
    },
    {
        month: '2015.03',
        a: 2000,
        b: 9800,
        c: 2290,
    },
    {
        month: '2015.04',
        a: 2780,
        b: 3908,
        c: 2000,
    },
    {
        month: '2015.05',
        a: 1890,
        b: 4800,
        c: 2181,
    },
    {
        month: '2015.06',
        a: 2390,
        b: 3800,
        c: 2500,
    },
    {
        month: '2015.07',
        a: 3490,
        b: 4300,
        c: 2100,
    },
];

const colProps = {
    lg: 12,
    md: 24,
};

const SimpleAreaChart = () => (
    <Container>
        <AreaChart
            data={data}
            margin={{
                top: 10,
                right: 30,
                left: 0,
                bottom: 0,
            }}
        >
            <XAxis dataKey="name" />
            <YAxis />
            <CartesianGrid strokeDasharray="3 3" />
            <Tooltip />
            <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" />
        </AreaChart>
    </Container>
);

const StackedAreaChart = () => (
    <Container>
        <AreaChart
            data={mixData}
            margin={{
                top: 10,
                right: 30,
                left: 0,
                bottom: 0,
            }}
        >
            <XAxis dataKey="name" />
            <YAxis />
            <CartesianGrid strokeDasharray="3 3" />
            <Tooltip />
            <Area type="monotone" dataKey="uv" stackId="1" stroke="#8884d8" fill="#8884d8" />
            <Area type="monotone" dataKey="pv" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
            <Area type="monotone" dataKey="amt" stackId="1" stroke="#ffc658" fill="#ffc658" />
        </AreaChart>
    </Container>
);

// StackedAreaChart

const toPercent = (decimal, fixed = 0) => {
    return `${(decimal * 100).toFixed(fixed)}%`;
};

const getPercent = (value, total) => {
    const ratio = total > 0 ? value / total : 0;

    return toPercent(ratio, 2);
};

const renderTooltipContent = o => {
    const { payload, label } = o;
    const total = payload.reduce((result, entry) => result + entry.value, 0);

    return (
        <div className="customized-tooltip-content">
            <p className="total">{`${label} (Total: ${total})`}</p>
            <ul className="list">
                {payload.map((entry, index) => (
                    <li
                        key={`item-${index}`}
                        style={{
                            color: entry.color,
                        }}
                    >
                        {`${entry.name}: ${entry.value}(${getPercent(entry.value, total)})`}
                    </li>
                ))}
            </ul>
        </div>
    );
};

const PercentAreaChart = () => (
    <Container>
        <AreaChart
            data={percentData}
            stackOffset="expand"
            margin={{
                top: 10,
                right: 30,
                left: 0,
                bottom: 0,
            }}
        >
            <XAxis dataKey="month" />
            <YAxis tickFormatter={toPercent} />
            <CartesianGrid strokeDasharray="3 3" />
            <Tooltip content={renderTooltipContent} />
            <Area type="monotone" dataKey="a" stackId="1" stroke="#8884d8" fill="#8884d8" />
            <Area type="monotone" dataKey="b" stackId="1" stroke="#82ca9d" fill="#82ca9d" />
            <Area type="monotone" dataKey="c" stackId="1" stroke="#ffc658" fill="#ffc658" />
        </AreaChart>
    </Container>
);

// CardinalAreaChart
const cardinal = d3.curveCardinal.tension(0.2);
const CardinalAreaChart = () => (
    <Container>
        <AreaChart
            data={mixData}
            margin={{
                top: 10,
                right: 30,
                left: 0,
                bottom: 0,
            }}
        >
            <XAxis dataKey="name" />
            <YAxis />
            <CartesianGrid strokeDasharray="3 3" />
            <Tooltip />
            <Area type="monotone" dataKey="uv" stroke="#8884d8" fill="#8884d8" fillOpacity={0.3} />
            <Area type={cardinal} dataKey="pv" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.3} />
        </AreaChart>
    </Container>
);

const AreaChartPage = () => (
    <div className="content-inner">
        <Button
            type="primary"
            style={{
                position: 'absolute',
                right: 0,
                top: -48,
            }}
        >
            <a href="http://recharts.org/#/en-US/examples/TinyBarChart" target="blank">
                Show More
            </a>
        </Button>
        <Row gutter={32}>
            <Col {...colProps}>
                <Card title="SimpleAreaChart">
                    <SimpleAreaChart />
                </Card>
            </Col>
            <Col {...colProps}>
                <Card title="StackedAreaChart">
                    <StackedAreaChart />
                </Card>
            </Col>
            <Col {...colProps}>
                <Card title="PercentAreaChart">
                    <PercentAreaChart />
                </Card>
            </Col>
            <Col {...colProps}>
                <Card title="CardinalAreaChart">
                    <CardinalAreaChart />
                </Card>
            </Col>
        </Row>
    </div>
);

export default AreaChartPage;
